<template>
  <div class="my-container">
    <el-row>
      <!-- 左侧内容 -->
      <el-col :span="6">
        <project-card class="project-card" :features="featureData"/>
      </el-col>
      <!-- 右边内容 -->
      <el-col :span="18">
        <el-card>
          <el-tabs v-model="activeName">
            <el-tab-pane :label="$t('msg.profile.feature')" name="feature">
              <feature :features="featureData"/>
            </el-tab-pane>
            <el-tab-pane :label="$t('msg.profile.chapter')" name="chapter">
              <chapter/>
            </el-tab-pane>
            <el-tab-pane :label="$t('msg.profile.author')" name="author">
              <author/>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import ProjectCard from './components/ProjectCard.vue'
import Feature from './components/Feature.vue'
import Chapter from './components/Chapter.vue'
import Author from './components/Author.vue'
//导入监听语言的变化的函数
import {watchSwitchLang} from '@/utils/i18n'

import {feature} from '@/api/user.js'
import {ref} from "vue";

const activeName = ref('feartrue')

//获取接口请求数据渲染页面
const featureData = ref([])
const getFeatureData = async ()=>{
  featureData.value =  await feature()  
}
getFeatureData()

//当语言变化的时候 发送网络请求 
watchSwitchLang(getFeatureData)
</script>

<style lang="scss" scoped>
.project-card{
  margin-right: 20px;
}
</style>
